<%--
  Created by IntelliJ IDEA.
  User: JJ_yo
  Date: 2020/7/14
  Time: 14:06
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我们</title>
    <!--CSS-->
    <link rel="stylesheet" href="/css/top.css">
    <link rel="stylesheet" href="/css/foot.css">
    <link rel="stylesheet" href="/css/home.css">
    <link rel="stylesheet" href="/css/aboutus.css">
    <link rel="stylesheet" href="/css/callUs.css">

    <!--JS-->
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/tfload.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=6w3RxWjjWIS8v9Zais2HYo3lftW8iFa2"></script>
</head>
<body>
<jsp:include page="top.jsp"></jsp:include>
<div id="middle">
    <div class="mid-head">
        <c:forEach items="${showList}" var="publicModel" begin="0" end="0">
            <div class="mid-head-one">${publicModel.bigTitle}</div>
            <div class="mid-head-two">${publicModel.smallTitle}</div>
        </c:forEach>
    </div>
    <div class="aboutus-mid-sec">
        <div>
            <div class="aboutus-ms-left">
                <div class="aboutus-msl-one">
                    <!--边框-->
                    <div class="aboutus-mslo-border">
                        <div>
                            <img src="../img/jd_mhoe.png" height="231" width="176"/>
                        </div>
                        <div>订房热线</div>
                        <div>${footModel.reservationPhone}</div>
                    </div>
                </div>
                <div class="aboutus-msl-two">
                    <div>
                        <div>服务项目</div>
                        <div>SERVICE&nbsp;ITEMS</div>
                    </div>
                </div>
                <div class="aboutus-msl-three">
                    <c:forEach items="${showList}" var="pub" begin="1" end="5">
                        <div>${pub.bigTitle}</div>
                    </c:forEach>
                </div>
                <div class="aboutus-msl-four">
                    <div>点击立即订房</div>
                </div>
            </div>
            <div class="callUs-ms-right">
                <div class="callUs-msr-top">
                    <div class="callUs-msrt-left">
                        <div>
                            <div>品牌背后的力量</div>
                        </div>
                        <div>
                            <div>才是成功的保证</div>
                        </div>
                    </div>
                    <div class="callUs-msrt-right">
                        <div class="callUs-msrtr-top">${footModel.content}</div>
                        <div class="callUs-msrtrt-bottom">
                            <div>
                                <div>地址：</div>
                                <div>${footModel.address}</div>
                            </div>
                            <div>
                                <div>
                                    <div>电话：</div>
                                    <div>${footModel.phone}</div>
                                </div>
                                <div>
                                    <div>传真：</div>
                                    <div>${footModel.fax}</div>
                                </div>
                                <div>
                                    <div>邮箱：</div>
                                    <div>${footModel.email}</div>
                                </div>
                            </div>
                            <div>
                                <div>网址：</div>
                                <div>${footModel.website}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="allmap" class="callUs-msr-bottom">
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="foot.jsp"></jsp:include>
<script type="text/javascript">
    var map = new BMap.Map('allmap');
    var poi = new BMap.Point(104.070734,30.575041);
    map.centerAndZoom(poi, 16);
    map.enableScrollWheelZoom();

    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
        '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
        '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
        '</div>';

    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
        title  : "百度大厦",      //标题
        width  : 290,             //宽度
        height : 105,              //高度
        panel  : "panel",         //检索结果面板
        enableAutoPan : true,     //自动平移
        searchTypes   :[
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    });
    var marker = new BMap.Marker(poi); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    marker.addEventListener("click", function(e){
        searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker
    //样式1
    var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
        title: "信息框1", //标题
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
            BMAPLIB_TAB_FROM_HERE, //从这里出发
            BMAPLIB_TAB_SEARCH   //周边检索
        ]
    });
    function openInfoWindow1() {
        searchInfoWindow1.open(new BMap.Point(104.070734,30.575041));
    }
    //样式2
    var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {
        title: "信息框2", //标题
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
            BMAPLIB_TAB_SEARCH   //周边检索
        ]
    });
    function openInfoWindow2() {
        searchInfoWindow2.open(new BMap.Point(104.070734,30.575041));
    }
    //样式3
    var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {
        title: "信息框3", //标题
        width: 290, //宽度
        height: 40, //高度
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
        ]
    });
    function openInfoWindow3() {
        searchInfoWindow3.open(new BMap.Point(104.070734,30.575041));
    }
</script>
</body>
</html>
